Eslint笔记

1：Eslint概念

ESLint 是在 ECMAScript/JavaScript 代码中识别和报告模式匹配的工具，它的目标是保证代码的一致性
和避免错误。说白了就是你们小组长想让你们按照他写代码的风格去写代码（完全插件话的配置插件和规则），指不定这规则还是从哪个大团队伸手党拿来的（各种比较规范化的一些规则配置）

2：Eslint的常用配置

1. parser：配置解析器，这个解析器是把源代码解析成AST之后去验证规则的，默认的是Espree，解析ECMAScript5特性，当然也可以使用其他的解析器，目前常用的babel-eslint、typescript-eslint-parser等

2. parserOptions：解析的配置，列举常用配置

   1. ecmaVersion: 解析的ECMAScript的版本，默认ECMAScript5
   2. sourceType: 制定解析的模块类型。script或者module（ECMAScript模块）
3. env: 配置解析的环境，env的值会为eslint默认的设置一些全局的变量，比如browser，会设置浏览器中的全局变量，jQuery，添加jQuery的全局变量，这些值可以并存，给出链接查看env环境变量

4. globals: 全局变量，源文件中访问未定义变量会no-undef，定义一些全局变量就可以使用globals

   console.log(globalVarible);
   // 'globalVarible' is not defined  no-undef
   
   // globals: {
   //  globalVarible: false;
   // }
   // will make it right

5. plugins: 插件，通过插件去增强eslint的功能，以及可以输出一些额外的配置，可以去npm去搜一下eslint-plugin-*去找一些常用的插件

6. rules: 规则，这里就是常用的设置一些项目中使用的规则，规则设置可以是eslint默认的一些rules也可以是插件中一些rules，比如vue/*，0->off关闭规则 1->warn报出警告 2->error报出错误级别，如果一些规则有其他选项，可以通过数组字面量形式配置

      {
          "rules": {
              "eqeqeq": "off",
              "curly": "error",
              "quotes": ["error", "double"] // 代码中使用双引号，级别为错误
          }
      }

7. root: 当前文件的eslint配置文件会在当前目录寻找，如果不存在，会从父级依次寻找到根目录，为了将eslint限制为该项目，可以在项目的根目录下的eslint配置root:true，会停止继续向上寻找

8. extends: 继承的概念，从前一个配置中继承规则，同时也可以去修改继承到的规则，修改分为两类，只修改错误级别或者整体覆盖规则，比如可以使用eslint:recommended来开启eslint的核心规则，这些规则可以在下面的链接中找到eslint:recommended规则，当然也可以继承一些第三方已有的配置，比如eslint-plugin-vue

      module.exports = {
        extends: [
          // add more generic rulesets here, such as:
          // 'eslint:recommended',
          'plugin:vue/recommended'
        ],
        rules: {
          // override/add rules settings here, such as:
          // 'vue/no-unused-vars': 'error'
        }
      }

以上的配置基本可以满足日常开发的需要了，inline Comments可以在源码文件中帮助我们控制Eslint，比如忽略某行验证，在源码文件中添加全局变量等等

// 用来禁止eslint检测的代码块
/* eslint-disable */

alert('foo');

/* eslint-enable */

// 下面这行禁止规则no-alert
alert('foo'); // eslint-disable-line no-alert

// 该文件添加一些全局变量
/* global var1, var2 */

// 很多类似的inline comment去控制eslint的行为，可去官网查阅

3.给出一个eslint配置进行分析

简单描述一个项目的需求来进行配置

• 项目的源码转换使用了babel，需要转移es6到es5
• 使用Vue开发，需要控制*.vue文件的代码统一风格
• 使用一些现成的规范控制，比如VueCli3.0开启的airbnb config
• 根据项目成员的使用习惯，大家约定一些规则的开关

// 使用VueCli3.0生成项目架构的时候，eslintrc.js的配置如下
module.exports = {
  root: true, // 项目级别的eslint配置
  env: {
    node: true  // node的环境，在源码中方为process的时候不会报错
  },
  'extends': [
    'plugin:vue/essential',  // Vue项目，继承了eslint-plugin-vue的rule，文章结尾会给出官网链接
    'eslint:recommended'  // 这个是eslint官方推荐的配置，在eslint rules页面打钩的都是recommended
  ],
  // 针对项目需求和团队制定自己的rules
  rules: {
    'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
    'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off'
  },
  parserOptions: {
    parser: 'babel-eslint'
  }
}

VueCli3.0官方给的配置其实就够用了，自己配置一些自定义的rules，接下来说几个业务场景，然后去对eslint配置进行修改

1. 在源码中使用document等变量的时候需要

   module.exports = {
     env: {
       browser: true,   // window、document 浏览器全局变量的使用  
     }
   }

2. 在Vue初始化的时候给了一个vm = new Vue({})的引用，这个会在全局中使用

   module.exports = {
     globals: {
       vm: false, // 在源码中使用vm就不会报错了，同时false还禁止对vm进行修改
       DDLogin: false, // 钉钉登陆的全局变量
     }  
   }

3. 修改VueCli3.0默认继承的规则，不适用eslint:recommended 使用airbnb-base config(不包含React部分)

   # use npm5+ 这里airbnb-base 依赖eslint和eslint-plugin-import(关于import的一些验证)
   npx install-peerdeps --dev eslint-config-airbnb-base

    module.exports = {
      'extend': [
         'plugin:vue/recommended',
         'airbnb-base'
      ],
    }

4. 根据团队制定规则

   module.exports = {
     rules: {
       'vue/no-v-html': 'off', // 这里针对继承来的配置去进行自定义配置
     }
   }

4：eslint plugin or config

给出以下常用的eslint-plugin-(可以增强eslint的功能，同时提供一些规则) 和 eslint-config-(可分享的配置，只是组合规则导出一个配置对象)

1. eslint-plugin-vue（Vue template，script的校验）、eslint-plugin-react(React的校验)
2. eslint-plugin-html(针对html中的js部分进行校验)
3. eslint-plugin-import(针对ES6 Module import 部分的校验)，可以配合webpack alias别名来判定import资源是否存在
4. eslint-plugin-promise(针对Promise的校验)
5. 自己去npm搜吧, eslint-plugin，只要能转AST，什么都能干，什么校验都可以做

总结：代码规范这些东西没有标准，我们可以完全自定义自己的规则，也可以去使用一些现成的规则，设置可以书写自己的规则，作为团队来讲，代码风格统一还是有必要的，本篇只是简单的记录一下eslint基本使用，剩下需要读者自己去结合自己的项目使用一些规则和开发一些插件满足需求

• eslint中文官网
• eslint-plugin-vue官网
• npm官网，搜索常用plugin or config